<template>
  <div id="header">
    <p>有什么想告诉大家...</p>
    <ul id="header-nav">
      <li>
        <a>
          <i class="el-icon-user"></i>表情
        </a>
      </li>
      <li>
        <a>
          <i class="el-icon-picture-outline"></i>图片
        </a>
      </li>
      <li>
        <a>
          <i class="el-icon-edit"></i>话题
        </a>
      </li>
    </ul>
    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
    <el-button type="success" plain id="primary" @click="send">发布</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      textarea: "",
      sendlist: [],
      username: "",
      userpic: ""
    };
  },
  computed:{
      list(){
          return this.$store.state.list
      }
  },
  methods: {
    send() {
    //   this.article = localStorage["list"];
      this.username = localStorage["username"];
      this.userpic = localStorage["userpic"];
      if (this.textarea != '') {
        this.$axios
          .get("http://localhost:3000/talk/articletalk", {
            params: {
              textarea: this.textarea,
              userId: 1
            }
          })
          .then(res => {
            // console.log("noteList:", res.data.data);
            this.sendlist = res.data.data;
          })
          .catch(err => {
            console.log("err:", err);
          });
        this.$store.state.list.unshift({
          article_text1: this.textarea,
          acticle_job1: this.nowTime,
          article_text: this.textarea,
          acticle_job: this.nowTime,
          article_img: this.userpic,
          article_username1: this.username,
          article_username: this.username,
          article_favorite:0,
          article_topic:0,
          article_share:0
        });
        this.$store.state.addarticle = this.$store.state.list
      }
    }
  }
};
</script>
<style scope>
#header {
  width: 750px;
  height: 180px;
  padding: 20px;
  background-color: #fff;
  opacity: 0.8;
}
#header p {
  color: rgb(67, 184, 252);
  font-size: 20px;
  position: absolute;
  margin-top: -10px;
  margin-left: 20px;
}
#header textarea {
  width: 710px;
  height: 100px;
  position: absolute;
  margin-top: 15px;
  margin-left: 20px;
}
#header-nav {
  list-style: none;
  height: 50px;
  position: absolute;
  margin-top: 130px;
  margin-left: 20px;
}
#header-nav li {
  position: relative;
  margin-top: 30px;
  float: left;
  box-sizing: border-box;
  margin: 20px 10px;
  padding: 10px 5px;
  font-family: microsoft yahei light, microsoft yahei, Helvetica, sans-serif,
    等线;
}
#header-nav li :hover {
  color: rgb(74, 198, 207);
  cursor: pointer;
}
#primary {
  /* color:rgb(67,184,252); */
  width: 100px;
  /* height:30px; */
  text-align: center;
  position: relative;
  margin-left: 620px;
  margin-top: 130px;
}
</style>